<template>
  <div>
    <h1>{{ qqq }}</h1>
    <button @click="fn">修改名字</button>
    <ul>
      <li v-for="item in ary">{{ item }}
        <my-button />
      </li>
    </ul>
  </div>
</template>
<script>
// @ is an alias to /src
/* 
  每一个vue文件的tempate只能有一个根元素  vue3没有这种要求
*/
export default {
  // props data methods computed 里边的属性名不能重复
  // props: ['qqq'],// 这种简写的意思就不做任何限制
  props: {
    // 一般 在创造一些 复用型组件的时候 才会写成 对象格式
    qqq: {
      type: [Number, String],  //对传递的类型做限制
      // required: true, // 必穿属性
      default() { //默认值
        return 'hahaha'
      },
      // validator(val) {
      //   // 若这个函数返回执行是false 那么vue就理解成校验失败了
      //   // return false
      //   if (val.length < 4) {
      //     console.error("要求qqq值的长度不能小于4")
      //     return false
      //   }
      // }
    }
  },
  data() {
    return {
      ary: [111, 222, 333, 444]
    }
  },
  methods: {
    fn() {
      // this.qqq = 888
      this.$emit('ccc', 888)
    }
  },
  created() {
    console.log(this)
  }
}
</script>
<style lang="less">
</style>